<template>
  <v-container>
    <v-row>
      <OperatingSpace></OperatingSpace>
      <History></History>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import History from "@/components/numgame/History.vue";
import OperatingSpace from "@/components/numgame/OperatingSpace.vue";
import { GameType } from "@/model/GameType";
import { Sync } from "vuex-pathify";
import { IQuestion } from "@/model/Question";
import { GuessNumQuestionBuilder } from "@/controlor/QuestionBuilder/GuessNumQuestionBuilder";
import { IAnswerChecker } from "@/controlor/AnswerChecker/IAnswerChecker";
import { GuessNumAnswerChecker } from "@/controlor/AnswerChecker/GuessNumAnswerChecker";
import { CompareQuestionBuilder } from "@/controlor/QuestionBuilder/CompareQuestionBuilder";
import { CompareAnsweChecker } from "@/controlor/AnswerChecker/CompareAnsweChecker";
import { DefaultNumGameState, INumGameState } from "@/model/NumGameState";

@Component({
  components: { OperatingSpace, History }
})
export default class GamePad extends Vue {
  // region Prop
  // @ts-ignore
  @Prop({ default: GameType.NumGuess }) type!: GameType;
  // endregion
  // region Data
  // endregion
  // region computed
  @Sync("NumGameState@Question") Question!: IQuestion;
  @Sync("NumGameState@AnswerChecker") AnswerChecker!: IAnswerChecker;
  @Sync("NumGameState") NumGameState!: INumGameState;
  @Sync("NumGameState@HistoryID") HistoryID!: string;
  // endregion
  // region watch
  // endregion
  // region method

  /**
   * 游戏资源初始化
   *
   * 生成题目 + 答案检查器
   */
  initGame() {
    this.NumGameState = new DefaultNumGameState();
    switch (this.type) {
      case GameType.NumGuess:
        this.Question = GuessNumQuestionBuilder.Build();
        this.AnswerChecker = new GuessNumAnswerChecker();
        break;
      case GameType.NumCompare:
        this.Question = CompareQuestionBuilder.Build();
        this.AnswerChecker = new CompareAnsweChecker();
        break;
    }

    this.$axios
      .post("api/HistoryInfos", {
        data: {
          Type: this.type
        }
      })
      .then(response => {
        this.HistoryID = response.data.ID;
      })
      .catch(error => {
        console.log(error);
      });
  }
  // endregion
  // region hook
  created() {
    this.initGame();
  }
  // endregion
}
</script>

<style lang="scss"></style>
